<template>
  <section>
    <div v-if="shopList.length">
      <div
        v-for="shopItem in shopList"
        :key="shopItem.id"
        class="content-wrap"
        @click="handleChild(shopItem, shopItem.id)"
      >
        <img class="shop-img" :src="baseImgUrl + shopItem.image_path" alt="" />
        <div class="text-wrap">
          <div class="row-one">
            <div class="left-wrap">
              <span class="yellow-text">品牌</span>
              <span class="bold-text">{{ shopItem.name }}</span>
            </div>
            <div class="right-wrap">
              <span
                class="grey"
                v-for="suppItem in shopItem.supports"
                :key="suppItem.id"
                >{{ suppItem.icon_name }}</span
              >
            </div>
          </div>
          <div class="row-one padding-height">
            <div class="left-wrap">
              <Star :score="shopItem.rating" :size="24" />
              <span class="orange-text">{{ shopItem.rating }}</span>
              <span class="grey-text"
                >月售{{ shopItem.recent_order_num }}单</span
              >
            </div>
            <div class="right-wrap">
              <span class="green-text">{{ shopItem.delivery_mode.text }}</span>
            </div>
          </div>
          <div class="row-one">
            <div class="left-wrap">
              <span class="grey-text1">
                ￥{{ shopItem.float_minimum_order_amount }}起送 / 配送费约￥{{
                  shopItem.float_delivery_fee
                }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul v-else>
      <li v-for="(item, index) in 7" :key="index">
        <img src="./images/shop_back.svg" alt="shop-back" />
      </li>
    </ul>
  </section>
</template>
<script>
import Star from '../../components/Star/index'

export default {
  name: 'ShopList',
  props: ['shopList'],
  components: { Star },
  data () {
    return {
      baseImgUrl: 'http://cangdu.org:8001/img/'
    }
  },
  methods: {
    handleChild (id) {
      this.$emit('handleGetOrderId', id)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../assets/common/stylus/mixins.styl'
.content-wrap
  width 100%
  height 100%
  padding 10px
  display flex
  bottom-border-1px($bc)
  overflow-y scroll
  .shop-img
    width 80px
    height 80px
  .text-wrap
    width 100%
    padding 0 20px
    display flex
    flex-direction column
    .row-one
      display flex
      justify-content space-between
      flex-wrap nowrap
      &.padding-height
        padding 15px 0
      .left-wrap
        display flex
        flex-wrap nowrap
        .yellow-text
          background-color $branBackground
          font-weight bold
          padding 2px
        .bold-text
          font-weight bold
          font-size 16px
          padding 0 5px
        .orange-text
          color $yellow
          font-weight bold
        .grey-text
          color #aaa
          padding 0 10px
        .grey-text1
          color #aaa
          font-size 14px
      .right-wrap
        display flex
        flex-wrap nowrap
        .grey
          color $bc
          border-1px($bc)
          margin-left 2px
        .green-text
          font-size 12px
          color $green
          border-1px($green)
</style>
